<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1.什么是同源
        // 如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。
        // 例如，下表给出了相对于http://www.test.com/index.html 页面的同源检测:
        // http://www.test.com:80/index.html(默认端口80)


        // 2.什么是同源策略
        // 同源策略(英文全称Same origin policy) 是浏览器提供的一个安全功能。
        // MDN官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。 这
        // 是一个用于隔离潜在恶意文件的重要安全机制。
        // 通俗的理解:浏览器规定，A网站的JavaScript, 不允许和非同源的网站C之间，进行资源的交互,例如:
        // ①无法读取非同源网页的Cookie. LocalStorage 和IndexedDB
        // ②无法接触非同源网页的DOM
        // ③无法向非同源地址发送Ajax请求


        // 3.什么是跨域
        // 同源指的是两个URL的协议、域名、端口-致，反之，则是跨域。
        // 出现跨域的根本原因:浏览器的同源策略不允许非同源的URL之间进行资源的交互。
        // 网页: http://www.test.com/index.html
        // 接口: http://www.api.com/userlist



        // 4.如何实现跨域数据请求
        // 现如今,实现跨域数据请求，最主要的两种解决方案，分别是JSONP和CORS.

        // JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为 了解决跨域问题，被迫想出来的一种临时解决方
        // 案。缺点是只支持GET请求,不支持POST请求。

        // CORS:出现的较晚，它是W3C标准，属于跨域Ajax请求的根本解决方案。支持GET和POST请求。缺点是不兼
        // 容某些低版本的浏览器。
    </script>
</body>

</html>